<template>
  <div class="xingq-1">
    <!--  -->
    <van-nav-bar
      class="app-1"
      title="商品详情"
      left-text=""
      left-arrow
      @click-left="index()"
    />
    <div class="xingq-2">
      <van-swipe :autoplay="3000">
        <van-swipe-item>
          <img style="" v-lazy="list.proimg" width="100%" height="300px" />
        </van-swipe-item>
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" width="100%" height="300px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--  -->
    <div class="wwwwwww">
      <div class="xingq-3">
        <span style="color: red; margin-left: 10%">
          ￥{{ list.price }} <s style="color: #efecec; font-size: 15px"></s>
        </span>
        <br />
        <span style="font-size: 10px; margin-top: 10%">
          <div class="xingq-3-1">上门</div>
          一键上门，省事省心
        </span>
        <span style="font-size: 10px; margin-left: 35%"
          >销量：<font color="red" style="font-size: 16px">
            {{ list.productcount }}</font
          ></span
        >
      </div>
      <div class="xingq-3-2" style="font-size: 20px">{{ list.proname }}</div>
      <div class="xingq-3-2" style="font-size: 10px">{{ list.products }}</div>
      <div class="xingq-3-4">
        <div class="nong">护肤</div>
        <div class="nong">美容</div>
        <div class="nong">滋润</div>
      </div>
      <div class="xingq-4">
        <span style="color: #bf8666; font-size: 25px; margin-left: 3%"
          >到店保障</span
        >
        <span style="color: #bf8666; margin-left: 6%">
          <van-icon name="passed" />&nbsp;迟到升级
        </span>
        <span style="color: #bf8666; margin-left: 6%">
          <van-icon name="passed" />&nbsp;爽约赔偿
        </span>
      </div>
    </div>
    <div class="xingq-5">
      <div class="tuijian">
        <div class="xingq-5-1" style="text-align: center"><b>相关推荐</b></div>
        <div class="xingq-5-2">
          <div class="xingq-5-img">
            <img :src="list.proimg" width="100%" height="130px" alt="" />
          </div>
          <p>{{ list.proname }}</p>
          <p style="color: red">￥{{ list.price }}</p>
        </div>
        <!-- <div class="xingq-5-2">
                    <div class="xingq-5-img">
                        <img :src="list.proimg" width="100%" height="130px" alt="" />
                    </div>
                    <p>{{ list.proname }}</p>
                    <p style="color:red">￥{{ list.price }}</p>
                </div>
                <div class="xingq-5-2">
                    <div class="xingq-5-img">
                        <img :src="list.proimg" width="100%" height="130px" alt="" />
                    </div>
                    <p>{{ list.proname }}</p>
                    <p style="color:red">￥{{ list.price }}</p>
                </div> -->
      </div>
    </div>

    <!--  -->
    <div class="xingq-6">
      <div class="xingq-6-1" @click="ditu">
        <van-icon name="location" size="30px" color="#99ff" />
        <br />
        <span style="color: #99ff">到店</span>
      </div>
      <div class="xingq-6-1" @click="search()">
        <van-icon :color="likeColor" :name="shixin" size="30px" />
        <br />
        <span style="color: red">收藏</span>
      </div>
      <div class="xingq-6-1" @click="good1()">
        <van-icon name="shopping-cart-o" size="30px" color="orange" />
        <br />
        <span style="color: orange">购物车</span>
      </div>

      <div style="margin-top: 8px">
        <van-button
          @click="good(list)"
          style="
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            width: 70px;
          "
          color="#FFA15E"
        >
          <i class="el-icon-plus" style="font-size: 18px"></i
          ><van-icon name="cart-o" size="18px" />
        </van-button>
        <van-button
          @click="zhifu(list)"
          style="
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            width: 130px;
          "
          color="#FF9900"
        >
          立即购买
        </van-button>
      </div>
      <!-- <div class="xingq-6-2" >加入购物车</div>
            <div class="xingq-6-3" >立即购买</div> -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: "",
      list1: "",
      likeColor: "#ffffff",
      shixin: "like",
      orderList: "",
      images: [],
      list2: [],
      lll: "",
    };
  },
  created() {
    // this.getProList();
    this.pruduceid();
  },
  methods: {
    // getProList(){
    //     axios({
    //         url: "/api/user/getUserProject?id=" + this.$route.query.id,
    //         method: "GET",
    //     }).then((res) => {
    //         this.list = res.data
    //         console.log(this.list);
    //     });
    // },
    pruduceid() {
      axios({
        url: "/api/product/pruduceid?id=" + this.$route.query.id,
        method: "GET",
      }).then((res) => {
        this.list = res.data;
        this.lll = this.list.proname.split("");
      });
      axios({
        url: "/api/user/getUserById",
        method: "GET",
        params: {
          id: JSON.parse(localStorage.getItem("user")).userId,
        },
      }).then((res) => {
        this.list1 = res.data;
        console.log(this.list1.userOrder);
        if (this.list1.userOrder.indexOf(this.list.id) != -1) {
          this.likeColor = "red";
        } else {
          this.likeColor = "#ffffff";
        }
      });
      axios({
        url: "/api/user/getLikeList",
        method: "GET",
        params: {
          proname: this.lll,
        },
      }).then((res) => {
        this.list2 = res.data;
      });
    },

    //  params:this.$route.params.user,
    // 跳转首页
    index() {
      this.$router.go(-1);
    },
    // 跳转购物车
    good1() {
      this.$router.push({
        path: "/good",
        query: { userId: this.$route.query.userId },
      });
    },
    //加入购物车
    good(list) {
      axios({
        url: "/api/product/getredis",
        method: "GET",
        params: { userId: this.$route.query.userId, id: list.id, buycount: 1 },
      }).then((res) => {
        this.$message({
          type: "success",
          message: "加入成功",
        });
        console.log(res);
      });
    },

    //支付
    zhifu(list) {
      this.$router.push({ path: "/fukuan", query: { str: list } });
      // axios({
      //     url: "/api/order/alipay",
      //     method: "POST",
      //     params: {
      //         subject:"www",
      //         total_amount: list.price,
      //         pserial: 11111,
      //     },
      // }).then(resp => {
      //     // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
      //     const divForm = document.getElementsByTagName('div')
      //     if (divForm.length) {
      //         document.body.removeChild(divForm[0])
      //     }
      //     console.log(resp);
      //     const div = document.createElement('div')//创建新窗口
      //     div.innerHTML = resp.data // data就是接口返回的form 表单字符串
      //     document.body.appendChild(div)
      //     document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
      //     document.forms[0].submit()
      //     this.serve();
      // })
    },

    search() {
      if (this.list1.userOrder == "") {
        this.orderList = this.list.id + ",";
        axios({
            url: "/api/user/updateOrderList",
            method: "GET",
            params: {
              userId: JSON.parse(localStorage.getItem("user")).userId,
              userOrder: this.orderList,
            },
          }).then((res) => {
            this.pruduceid();
            this.$message({
              type: "success",
              message: "收藏成功",
            });
          });
      } else {
        if (this.list1.userOrder.indexOf(this.list.id) != -1) {
          // this.orderList = this.list1.userOrder.replace(this.list.id+",");
          this.likeColor = "#ffffff";
          let index = this.list1.userOrder.lastIndexOf(this.list.id);
          this.orderList =
            this.list1.userOrder.substring(0, index) +
            this.list1.userOrder.substring(index + 2);
          console.log(this.orderList);
          axios({
            url: "/api/user/updateOrderList",
            method: "GET",
            params: {
              userId: JSON.parse(localStorage.getItem("user")).userId,
              userOrder: this.orderList,
            },
          }).then((res) => {
            this.pruduceid();
            this.$message({
              type: "success",
              message: "取消收藏",
            });
          });
        } else {
          this.orderList = this.list1.userOrder + this.list.id + ",";
          this.likeColor = "red";
          axios({
            url: "/api/user/updateOrderList",
            method: "GET",
            params: {
              userId: JSON.parse(localStorage.getItem("user")).userId,
              userOrder: this.orderList,
            },
          }).then((res) => {
            this.pruduceid();
            this.$message({
              type: "success",
              message: "收藏成功",
            });
          });
        }
      }
    },
    ditu() {
      this.$router.push({ path: "/ditu" });
    },
  },
};
</script>

<style>
body {
  background-color: #f5f8fe;
}

.wwwwwww {
  float: left;
  width: 96%;
  margin-left: 2%;
  margin-top: 10px;
  border-radius: 20px;
  background: #ffffff;
}

.xingq-6-3 {
  width: 20%;
  height: 45px;
  float: left;
  /* margin-left: 10%; */
  border-radius: 51px;
  margin-top: 3%;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  text-align: center;
  font-size: 10px;
  line-height: 50px;
}

.xingq-6-2 {
  width: 20%;
  height: 45px;
  float: left;
  margin-left: 7%;
  margin-top: 3%;
  border-radius: 51px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  text-align: center;
  font-size: 10px;
  line-height: 50px;
}

.xingq-6-1 {
  float: left;
  margin-left: 6%;
  margin-top: 2%;
  font-size: 13px;
}

.xingq-6 {
  width: 100%;
  height: 110px;
  float: left;
}

.xingq-5-img {
  width: 100%;
  height: 130px;
  float: left;
}

.xingq-5-2 {
  width: 30%;
  height: 200px;
  float: left;
  margin-left: 2%;
  font-size: 10px;
  text-align: center;
}

.tuijian {
  width: 96%;
  margin-left: 2%;
  margin-top: 20px;
  border-radius: 10px;
  background: #ffffff;
  float: left;
}

.xingq-5-1 {
  width: 100%;
  float: left;
  font-size: 20px;
  line-height: 30px;
}

.xingq-5 {
  width: 100%;
  height: 100%;
  float: left;
}

.xingq-4 {
  width: 100%;
  height: 50px;
  float: left;
  line-height: 50px;
}

.nong {
  width: 10%;
  height: 20px;
  border-radius: 10%;
  float: left;
  margin-left: 15%;
  text-align: center;
}

.xingq-3-4 {
  width: 100%;
  height: 30px;
  float: left;
  margin-top: 5%;
}

.xingq-3-2 {
  width: 100%;
  height: 30px;
  float: left;
  margin-top: 3%;
  font-size: 15px;
  margin-left: 5%;
  font-size: 35px;
}

.xingq-3-1 {
  width: 7%;
  height: 20px;
  float: left;
  margin-left: 10%;
  margin-top: 1%;
}

.xingq-3 {
  float: left;
  margin-top: 2%;
  width: 100%;
  height: 65px;
  font-size: 20px;
}

.xingq-2 {
  width: 100%;
  height: 300px;
  float: left;
}

.xingq-1 {
  /* width: 100%;
    height: 100%;
    background-color: rgb(207, 207, 207);
    float: left; */
}
</style>